// 超出行数，自动显示行尾省略号，最多5行
// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 5 {
	.line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		/* #endif */

		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}

.f-w-b{
	font-weight: bold;
}

// 文字居中
.text-center{
	text-align: center;
}
// 文字居左
.text-left{
	text-align: left;
}
// 文字居右
.text-right{
	text-align: right;
}

.white-bg{
	background-color: #fff;
}
// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现

// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
.reset-button {
	padding: 0;
	background-color: transparent;
	/* #ifndef APP-PLUS */
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	/* #endif */
	/* #ifdef APP-NVUE */
	border-width: 0;
	/* #endif */
}

/* #ifndef APP-NVUE */
.reset-button::after {
   border: none;
}
/* #endif */

.hover-class {
	opacity: 0.7;
}

// 定义字体(rpx)单位，大于或等于10的都为rpx单位字体
@for $i from 10 through 60 {
	.font-#{$i} {
		font-size: $i + rpx;
	}
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：margin-30或者m-30
		.margin-#{$i}, .m-#{$i} {
			margin: $i + rpx!important;
		}
		
		
		// 左右
		.margin-x-#{$i},.m-x-#{$i} {
			margin-left: $i + rpx!important;
			margin-right: $i + rpx!important;
		}
		// 上下
		.margin-y-#{$i},.m-y-#{$i} {
			margin-top: $i + rpx!important;
			margin-bottom: $i + rpx!important;
		}
		// 得出：padding-30或者p-30
		.padding-#{$i}, .p-#{$i} {
			padding: $i + rpx!important;
		}
		
		// 左右内边距
		.padding-x-#{$i},.p-x-#{$i} {
			padding-left: $i + rpx!important;
			padding-right: $i + rpx!important;
		}
		// 上下内边距
		.padding-y-#{$i},.p-y-#{$i} {
			padding-top: $i + rpx!important;
			padding-bottom: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： m-l-30
			// 定义外边距
			.m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
			
			// 完整版，结果如：margin-left-30
			// 定义外边距
			.margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
	}
}

// flex布局
.flex,
.flex-x, {
	display:  flex;
}

.flex-y{
	display:  flex;
	flex-direction: column;
}

.flex-x-center {
	display:  flex;
	justify-content: center;
}

.flex-xy-center {
	display:  flex;
	justify-content: center;
	align-items: center;
}

.flex-y-center {
	display:  flex;
	align-items: center;
}

.flex-x-left {
	display:  flex;
}

.flex-x-reverse,
.flex-row-reverse {
	flex-direction: row-reverse;
}

.flex-y-reverse,
.flex-column-reverse {
	flex-direction: column-reverse;
}

// 自动伸缩
.flex-fill {
	flex: 1 1 auto
}

// 边界自动伸缩
.margin-top-auto,
.m-t-auto {
	margin-top: auto !important
}

.margin-right-auto,
.m-r-auto {
	margin-right: auto !important
}

.margin-bottom-auto,
.m-b-auto {
	margin-bottom: auto !important
}

.margin-left-auto,
.m-l-auto {
	margin-left: auto !important
}

.margin-center-auto,
.m-c-auto {
	margin-left: auto !important;
	margin-right: auto !important
}

.margin-middle-auto,
.m-m-auto {
	margin-top: auto !important;
	margin-bottom: auto !important
}

// 换行
.flex-wrap {
	flex-wrap: wrap;
}

// 反向换行
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

// 主轴起点对齐
.flex-start {
	justify-content: flex-start
}

// 主轴中间对齐
.flex-center {
	justify-content: center
}

// 主轴终点对齐
.flex-end {
	justify-content: flex-end
}

// 主轴等比间距
.flex-between {
	justify-content: space-between
}

// 主轴均分间距
.flex-around {
	justify-content: space-around
}

// 交叉轴起点对齐
.flex-items-start {
	align-items: flex-start
}

// 交叉轴中间对齐
.flex-items-center {
	align-items: center
}

// 交叉轴终点对齐
.flex-items-end {
	align-items: flex-end
}

// 交叉轴第一行文字基线对齐
.flex-items-baseline {
	align-items: baseline
}

// 交叉轴方向拉伸对齐
.flex-items-stretch {
	align-items: stretch
}


// 以下属于项目(子元素)的类

// 子元素交叉轴起点对齐
.flex-self-start {
	align-self: flex-start
}

// 子元素交叉轴居中对齐
.flex-self-center {
	align-self: center
}

// 子元素交叉轴终点对齐
.flex-self-end {
	align-self: flex-end
}

// 子元素交叉轴第一行文字基线对齐
.flex-self-baseline {
	align-self: baseline
}

// 子元素交叉轴方向拉伸对齐
.flex-self-stretch {
	align-self: stretch
}

// 多轴交叉时的对齐方式

// 起点对齐
.flex-content-start {
	align-content: flex-start
}

// 居中对齐
.flex-content-center {
	align-content: center
}

// 终点对齐
.flex-content-end {
	align-content: flex-end
}

// 两端对齐
.flex-content-between {
	align-content: space-between
}

// 均分间距
.flex-content-around {
	align-content: space-around
}

// 全部居中对齐
.flex-middle {
	justify-content: center;
	align-items: center;
	align-self: center;
	align-content: center
}

// 是否可以放大
.flex-grow {
	flex-grow: 1
}

// 是否可以缩小
.flex-shrink {
	flex-shrink: 1
}
